<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
	<meta charset="UTF-8"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		  name="viewport">
	<title>Title</title>
	<link rel="stylesheet" href="../../static/vant_v4/index.css"/>
	<style>
		#app {
			background: rgba(255, 50, 75, 0);
			height: 100%;
			overflow: hidden;
			width: 100%;
		}

		.contentHome {
			text-align: center;
			height: 100vh;
			width: 100%;
			overflow: hidden;
			position: absolute;
		}

		/* 竖屏 */
		@media screen and (orientation: portrait) {
			.search_content_class {
				margin-top: 0.3rem;
				/*top: 2rem;*/
				width: 100%;
				/*border: 2px solid #2365df;*/
			}

			.table_content_class {
				/*border: 2px solid #cc2844;*/
			}

			.table_content_th {

			}

			.table_content_datalist {
				height: 86vh;
				overflow: auto;
				/*width: 100%;*/
				/*border: 2px solid #cc2844;*/
			}

			.contentVisitorInformationInfo {
				height: 90vh;
				overflow: auto;
				/*    border: 2px solid #cc2844;*/
			}
		}

		/* 横屏 */
		@media screen and (orientation: landscape) {
			.search_content_class {
				margin-top: 0.3rem;
				/*top: 2rem;*/
				width: 100%;
				/*border: 2px solid #2365df;*/
			}

			.table_content_class {
				/*border: 2px solid #cc2844;*/
				height: 86vh;
			}

			.table_content_th {

			}

			.table_content_datalist {
				height: 75vh;
				overflow: auto;
				/*width: 100%;*/
				/*border: 2px solid #cc2844;*/
			}

			.contentVisitorInformationInfo {
				height: 75vh;
				overflow: auto;
				top: 5px;
				/*border: 2px solid #cc2844;*/
			}

			.VisitorInformationButton {

			}
		}

		@media screen and  (max-width: 768px) {
			.app .operation-wrapper .el-header {
				height: 22% !important;
			}

			.app .operation-wrapper .el-main {
				padding: 0px 16px !important;
				height: calc(100% - 22%);
				overflow-y: auto;

			}
		}

		@media screen and (min-width: 768px) and (max-width: 1200px) {
			.app .operation-wrapper .el-header {
				height: 16% !important;
			}

			.app .operation-wrapper .el-main {
				padding: 0px 16px !important;
				height: calc(100% - 16%);
				overflow-y: auto;

			}
		}


		.search_class {
			/*border: 2px solid #2365df;*/

		}

		.header_class_icon {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;


		}

		.header_icon {
			width: 2rem;
			height: 2rem;
		}

		/*奇数列*/
		.odd_column_light {
			background-color: rgb(239, 240, 242);
		}

		/*偶数列*/
		.even_column_light {
			background-color: #eff1f6;
		}

		.table_content_color_light {

		}

		.table_content_color_dark {
			color: white;
		}

		.table_th_class_light {
			background-color: rgb(223, 225, 230);
			border-top-left-radius: 0.5rem;
			border-top-right-radius: 0.5rem;
		}

		.van-theme-dark body {
			text-color: #f5f5f5;
			background-color: black;
		}

		.contentVisitorInformation {
			text-align: center;
			height: 100%;
			width: 100%;
			position: absolute;
			overflow: hidden;
			top: 5px;
		}

		.child_checkbox {
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.bottom_button {
			border-radius: 2rem;
		}

		.table_van_cell_group {
			border: 1px solid #dfdfdf;
		}

		body {
			overflow: hidden;
		}
	</style>
	<style>
		.floatBtn {
			-moz-user-select: none; /*火狐*/
			-webkit-user-select: none; /*webkit浏览器*/
			-ms-user-select: none; /*IE10*/
			-khtml-user-select: none; /*早期浏览器*/
			user-select: none;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			position: fixed;
			z-index: 1;
			overflow: hidden;
			width: 100px;
			left: calc(100% - 85px);
			top: calc(100% - 100px);
			color: #e7e9ee;
			background: #27a1f9;
			font-size: 14px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
		}

		.floatBtn.rightBtn {
			border-radius: 20px 0 0 20px;
		}

		.floatBtn.leftBtn {
			border-radius: 0 20px 20px 0;
		}

		.floatBtn.moveBtn {
			border-radius: 20px;
		}

		/*# sourceMappingURL=index.css.map */

	</style>

</head>
<body>
<script src="../../static/vue/vue.global.js"></script>
<!--<script src="../../static/vconsole/vconsole.min.js"></script>-->
<script src="../../static/axios/axios.min.js"></script>
<script src="../../static/vant_v4/vant.min.js"></script>
<script src="../../static/vuex/vuex.global.js"></script>
<script src="../../static/vue-router/vue-router.global.js"></script>
<div id="app">
	<router-view></router-view>
</div>
<template id="Home">
	<van-config-provider :theme="theme" :theme-vars="themeVars">
		<div class="contentHome">
			<van-space direction="vertical" :size="5" fill>
				<div class="search_content_class" z-index="99">
					<!--:offset-top="2"-->
					<van-sticky :offset-top="search_navbarHeight" id="searchBtn">
						<van-cell-group border="true" class="search_class" inset>
							<van-row>
								<!--                                <van-col span="3" @click="themeSwitch">-->
								<!--                                    <div class="header_class_icon">-->
								<!--                                        <van-image class="header_icon" lazy-load-->
								<!--                                                   position="center" src="../icon/header.png"></van-image>-->
								<!--                                    </div>-->
								<!--                                </van-col>-->
								<van-col span="6">
									<van-dropdown-menu active-color="#ee0a24" duration="0.3" style="height: 100%;">
										<van-dropdown-item :options="option" v-model="dropDownValue"/>
									</van-dropdown-menu>
								</van-col>
								<van-col span="18">
									<van-search
											@search="onSearch"
											left-icon=""
											placeholder="请输入"
											show-action
											v-model="searchValue" @update:model-value="searchFiltr">
										<!--@change="searchFiltr()"  v-on:input="searchFiltr($event,v)"-->
										<template #action>
											<div @click="getData">搜索</div>
										</template>
									</van-search>
								</van-col>
							</van-row>
						</van-cell-group>
					</van-sticky>
				</div>
				<div :class="['table_content_class',`table_content_color_\${theme}`]">
					<van-cell-group class="table_van_cell_group" border="true" inset>
						<van-sticky :offset-top="table_navbarHeight" id="configBtn" z-index="9">
							<van-row :class="tableThClassName(index)" justify="center">
								<van-col span="2"></van-col>
								<van-col span="4">姓名</van-col>
								<van-col span="3">性别</van-col>
								<van-col span="7">手机号码</van-col>
								<van-col span="4">已入园</van-col>
								<van-col span="4">被访人</van-col>
							</van-row>
						</van-sticky>
						<van-pull-refresh
								v-model="isLoading"
								success-text="刷新成功"
								@refresh="onRefresh"
								:disabled="refreshDisabled"
						>
							<div class="table_content_datalist" id="table_content_datalist">
								<br>
								<van-space size="1rem" direction="vertical" fill>
									<van-row :class="tableRowClassName(index)" :key="index" class=""
											 justify="center"
											 v-for="(item, index) in showData" v-if="showData.length>0">
										<van-col span="2" class="child_checkbox">
											<van-checkbox :name="item.id" v-model="item.isCheckbox"></van-checkbox>
										</van-col>
										<van-col span="4" @click="goToLink(item)" class="child_checkbox">
											{{item.visitorsname}}
										</van-col>
										<van-col span="3" @click="goToLink(item)" class="child_checkbox">
											{{item.gender_}}
										</van-col>
										<van-col span="7" @click="goToLink(item)" class="child_checkbox">
											{{item.visitorsphone}}
										</van-col>
										<van-col span="4" @click="goToLink(item)" class="child_checkbox">
											{{item.visitstatus_}}
										</van-col>
										<van-col span="4" @click="goToLink(item)" class="child_checkbox">
											{{item.bfr_name}}
										</van-col>

									</van-row>

									<van-row justify="center" v-else>
										<van-col span="24">数据为空</van-col>
									</van-row>
								</van-space>
								<br>
							</div>
						</van-pull-refresh>
					</van-cell-group>
				</div>
				<!-- 外层ul控制卡片范围 -->
				<div :class="[{moveBtn: longClick}, `\${btnType}Btn`]" @touchend="touchEnd($event)"
					 @touchmove="touchMove($event)"
					 @touchstart="touchstart($event)"
					 class="floatBtn"
					 v-show="isShow"
					 @click="batchEnterTheParkClick"
				>
					<span>批量入园</span>
				</div>
			</van-space>
		</div>
	</van-config-provider>
</template>
<template id="VisitorInformation">
	<van-config-provider :theme="theme" :theme-vars="themeVars">
		<div class="contentVisitorInformation">
			<van-space direction="vertical" :size="5" fill>
				<!--                <div class="search_content_class" z-index="999">-->
				<!--                    <van-sticky :offset-top="navbarHeight">-->
				<!--                        <van-cell-group inset>-->
				<!--                            <van-nav-bar-->
				<!--                                    @click-left="onClickLeft"-->
				<!--                                    left-arrow-->
				<!--                                    left-text="返回"-->
				<!--                                    placeholder="true"-->
				<!--                                    title="人员详细信息"-->
				<!--                            ></van-nav-bar>-->
				<!--                        </van-cell-group>-->
				<!--                    </van-sticky>-->
				<!--                </div>-->
				<van-cell-group inset class="contentVisitorInformationInfo">
					<!-- 输入任意文本 -->
					<van-field label="访客单位" readonly v-model="computed_info.visitorsunit"></van-field>
					<van-field label="姓名" readonly v-model="computed_info.visitorsname"></van-field>
					<van-field label="性别" readonly v-model="computed_info.gender"></van-field>
					<!-- 输入手机号，调起手机号键盘 -->
					<van-field label="手机号码" readonly type="tel" v-model="computed_info.visitorsphone"></van-field>
					<van-field label="证件类型" readonly v-model="computed_info.documenttype"></van-field>
					<van-field label="证件号码" readonly type="number" v-model="computed_info.documentnumber"></van-field>
					<van-field v-show="!isExistTouxian" label="访客头像" model-value="无头像信息" disabled></van-field>
					<van-field v-show="isExistTouxian" label="访客头像" readonly></van-field>
					<van-cell-group v-show="isExistTouxian" inset>
						<van-swipe v-show="isExistTouxian && isTouxiangShow" :autoplay="3000" lazy-render>
							<van-swipe-item v-for="(image, index) in tx_picture" :key="index">
								<van-image @click="showPotoTX"
										   fit="cover"
										   position="left"
										   height="10rem"
										   :src="image"
										   width="10rem"></van-image>
							</van-swipe-item>
						</van-swipe>
						<div v-show="!isTouxiangShow"
							 style="display: flex;align-items: center;height: 10rem;width: 100%;justify-content: center;text-align: justify;color: #ccced3;">
							加载中···
						</div>
					</van-cell-group>
					<van-field label="车牌号码" readonly v-model="computed_info.licensenumber"></van-field>
					<van-field label="受访人" readonly v-model="computed_info.bfr_name"></van-field>
					<van-field label="来访区域" readonly v-model="computed_info.place"></van-field>
					<van-field label="来访时间" readonly v-model="computed_info.begintime"></van-field>
					<van-field label="预离时间" readonly v-model="computed_info.endtime"></van-field>
					<van-field label="携带物品" readonly v-model="computed_info.goods"></van-field>
					<van-field v-show="!isExistWupin" label="物品照片" model-value="无物品照片信息" disabled></van-field>
					<van-field v-show="isExistWupin" label="物品照片" readonly></van-field>
					<van-cell-group inset>
						<van-swipe v-show="isExistWupin && isWupingShow" :autoplay="3000" lazy-render>
							<van-swipe-item v-for="(image, index) in wp_picture" :key="index">
								<van-image @click="showPotoGO"
										   fit="cover"
										   position="left"
										   height="10rem"
										   :src="image"
										   width="10rem"></van-image>
							</van-swipe-item>
						</van-swipe>
						<div v-show="!isWupingShow && isExistWupin"
							 style="display: flex;align-items: center;height: 10rem;width: 100%;justify-content: center;text-align: justify;color: #ccced3;">
							加载中···
						</div>
					</van-cell-group>
					<br>
					<van-dialog
							:title="dialogTitle"
							close-on-click-overlay
							confirm-button-color="red"
							v-model:show="show">
						<van-image :src="showPicture"></van-image>
					</van-dialog>
				</van-cell-group>
				<!--            <div class="VisitorInformationButton">-->
				<van-cell-group border="false" class="bottom_button" inset="true">
					<van-sticky :offset-bottom="4" position="bottom">
						<van-button block round type="primary" @click="EnterTheParkDataList">确定入园</van-button>
					</van-sticky>
				</van-cell-group>
				<!--            </div>-->
			</van-space>
		</div>
	</van-config-provider>
</template>
<script>
	//var vConsole = new VConsole();
	/**
	 * 第一页
	 * @type {{template: string, setup(): *}}
	 */
	const Home = {
		template: '#Home',
		setup(props, context) {
			let router = VueRouter.useRouter();
			let searchValue = Vue.ref('');
			let configBtn = Vue.ref(null);
			let navbarHeight = Vue.ref('0');
			let table_navbarHeight = Vue.ref('0');
			let search_navbarHeight = Vue.ref('0');
			let dropDownValue = Vue.ref(0);
			let isLoading= Vue.ref(false);
			// let theme = Vue.ref('light');
			//下拉选项
			let option = [
				{text: '姓名', value: 0},
				{text: '电话号码', value: 1},
				{text: '被访人', value: 2},
				{text: '证件号码', value: 3},
			];
			let dataList = Vue.ref([]);
			let store = Vuex.useStore();//这时的 store 就相当于 this.$store 了
			let themeSwitch = () => {
				store.dispatch('setTheme')
			};
			let showData = Vue.ref([]);
			let batchEnterTheParkData = Vue.ref([]);
			let theme = Vue.computed({
				get: () => {
					return store.getters.getTheme;
				},
				set: (v) => {

				}
			})
			let isShow = Vue.computed({
				get: () => {
					let num = 0;
					for (let i = 0; i < showData.value.length; i++) {
						if (showData.value[i].isCheckbox) {
							num = num + 1;
						}
						if (num > 1) {
							return true;
						}
					}
					return false;
				},
				set: (v) => {

				}
			})


			let timeOutEvent = Vue.ref('0');
			let longClick = Vue.ref('0');
			// 手指原始位置
			let oldMousePos = Vue.ref('{}');
			// 元素原始位置
			let oldNodePos = Vue.ref('{}');
			let btnType = Vue.ref('right');
			let refreshDisabled= Vue.ref(false);
			function searchFiltr(v) {
				let sV = v
				let dropDV = dropDownValue.value;
				/*证件*/
				showData.value = dataList.value.filter((item) => {
					let documenttype = item.documenttype
					if (documenttype == "0") {
						item.documenttype_ = "身份证";
					} else if (documenttype == "1") {
						item.documenttype_ = "护照";
					} else if (documenttype == "2") {
						item.documenttype_ = "驾驶证";
					} else if (documenttype == "3") {
						item.documenttype_ = "其他";
					}
					return item
				})
				showData.value = dataList.value.filter((item) => {
					let gender = item.gender
					if (gender == "0") {
						item.gender_ = "男";
					} else if (gender == "1") {
						item.gender_ = "女";
					}
					return item
				})
				showData.value = dataList.value.filter((item) => {
					let visitstatus_ = item.visitstatus
					if (visitstatus_ == "1") {
						item.visitstatus_ = "是";
					} else {
						item.visitstatus_ = "否";
					}
					return item
				})

				if (sV == null || sV == "" || sV == undefined || dataList.value.length == 0) {
					showData.value = JSON.parse(JSON.stringify(dataList.value));

				} else if (sV != null && sV != "" && sV != undefined && dataList.value.length > 0) {
					if (dropDV == 0) {
						//姓名过滤
						showData.value = dataList.value.filter((item) => {
							let name = item.visitorsname
							item.isCheckbox = false;
							if (name.includes(sV)) {
								return item
							}
						})
					} else if (dropDV == 1) {
						//过滤电话号码
						showData.value = dataList.value.filter((item) => {
							let phone = item.visitorsphone;
							item.isCheckbox = false;
							if (phone.includes(sV)) {
								return item
							}
						})
					} else if (dropDV == 2) {
						//被访人
						showData.value = dataList.value.filter((item) => {
							let bfName = item.bfr_name;
							item.isCheckbox = false;
							if (bfName.includes(sV)) {
								return item
							}
						})
					} else if (dropDV == 3) {
						//身份证
						showData.value = dataList.value.filter((item) => {
							let idNumber = item.documentnumber;
							item.isCheckbox = false;
							if (idNumber.includes(sV)) {
								return item
							}
						})
					} else {
						showData.value = JSON.parse(JSON.stringify(sV));
					}

				}
			};

			let searchData = () => showToast(value.value);
			let onSearch = (v) => {
				showToast(v);
			}

			function showToast(val) {
				vant.showToast(val);
			};
			/**
			 * 表单样式
			 * */
			function tableThClassName() {
				if (theme.value == "light") {
					return 'table_th_class_light';
				} else {
					return 'table_th_class_dark';
				}

			};

			/**
			 * 获取数据
			 * */
			async function getData() {
				axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/FullDataList.jsp')
						.then(function (response) {
							var code = response.data.code;
							var message = response.data.message;
							var data = response.data.data;
							if (code == 'S') {
								dataList.value = data;
								searchFiltr();
							} else {
								dataList.value=[];
								searchFiltr();
								vant.showFailToast(message);
							}
						})
						.catch(function (error) {
							vant.showFailToast('数据加载异');
						});
			};

			function tableRowClassName(rowIndex) {
				if (theme.value == "light") {
					if ((rowIndex % 2) === 1) {
						return 'odd_column_light';
					} else {
						return 'even_column_light';
					}
				} else {
					if ((rowIndex % 2) === 1) {
						return 'odd_column_dark';
					} else {
						return 'even_column_dark';
					}
				}

			};

			/**
			 * 路由跳转至详情信息页
			 * */
			function goToLink(val) {
				router.push({name: 'VisitorInformation', params: {info: JSON.stringify(val)}});
			};

			//获取元素距顶距离
			function getElementToPageTop(el) {
				if (el.parentElement) {
					return this.getElementToPageTop(el.parentElement) + el.offsetTop
				}
				return el.offsetTop
			}

			let themeVars = Vue.reactive({
				DropdownMenuHeight: '100%',

			});

			/**
			 * 加载调用
			 * */
			Vue.onMounted(() => {
				window.addEventListener('scroll', handleScroll, true)
				table_navbarHeight.value = document.getElementById("configBtn").offsetTop;
				search_navbarHeight.value = document.getElementById("searchBtn").offsetTop;
				getData();
			});
			/**
			 * 监听滚动条 设置下拉框是否可用
			 * */
			function handleScroll(e) {
				let Height = document.getElementById("table_content_datalist").scrollTop
				if (Height==0){
					refreshDisabled.value=false;
				} else {
					refreshDisabled.value=true;
				}
			}
			//开始触屏
			function touchstart(ev) {
				// 定时器控制长按时间，超过500毫秒开始进行拖拽
				timeOutEvent.value = setTimeout(() => {
					longClick.value = 1;
				}, 500);
				let selectDom = ev.currentTarget;
				let {pageX, pageY} = ev.touches[0]; // 手指位置
				let {offsetLeft, offsetTop} = selectDom; // 元素位置
				// 手指原始位置
				oldMousePos.value = {
					x: pageX,
					y: pageY
				};
				// 元素原始位置
				oldNodePos.value = {
					x: offsetLeft,
					y: offsetTop
				};
				selectDom.style.left = `\${offsetLeft}px`;
				selectDom.style.top = `\${offsetTop}px`;
			};

			function touchMove(ev) {
				// 未达到500毫秒就移动则不触发长按，清空定时器
				clearTimeout(timeOutEvent.value);
				if (longClick.value === 1) {
					let selectDom = ev.currentTarget;
					// x轴偏移量
					let lefts = oldMousePos.value.x - oldNodePos.value.x;
					// y轴偏移量
					let tops = oldMousePos.value.y - oldNodePos.value.y;
					let {pageX, pageY} = ev.touches[0]; // 手指位置
					selectDom.style.left = `\${pageX - lefts}px`;
					selectDom.style.top = `\${pageY - tops}px`;
				}
			};

			//结束触屏
			function touchEnd(ev) {

				// 清空定时器
				clearTimeout(timeOutEvent.value);
				if (longClick.value === 1) {
					longClick.value = 0;
					let selectDom = ev.currentTarget;
					let {clientWidth, clientHeight} = document.body;
					let {offsetLeft, offsetTop} = selectDom;
					//clientWidth、clientHeight 元素内部宽度和高度,
					//offsetLeft 当前对象到其上级层左边的距离 offsetTop 当前对象到其上级层顶部的距离
					console.log("touchEnd clientWidth: " + clientWidth + " clientHeight:" + clientHeight)
					console.log("touchEnd offsetLeft: " + offsetLeft + " offsetTop:" + offsetTop)
					//touchEnd clientWidth: 414 clientHeight:0
					//touchEnd offsetLeft: 305 offsetTop:389

					selectDom.style.left = (offsetLeft + 50) > (clientWidth / 2) ?
							'calc(100% - 100px)' : 0;
					//距离顶部
					if (offsetTop < 90) {
						selectDom.style.top = '90px';
					} else if (offsetTop + 36 > clientHeight) {
						//selectDom.style.top = `\${clientHeight - 36}px`;
						selectDom.style.top = `\${offsetTop - 36}px`;
					}
					//显示在左边还是右边
					btnType.value =
							(offsetLeft + 50) > (clientWidth / 2) ?
									'right' : 'left';
				}
			};

			//过滤非选中数据
			function  batchEnterTheParkDatafilter() {
				batchEnterTheParkData.value  = showData.value.filter((item) => {
					if (item.isCheckbox && item.visitstatus !="1") {
						return item
					}

				})
				return batchEnterTheParkData.value
			}

			//批量入园
			function batchEnterTheParkClick() {
				batchEnterTheParkDatafilter()
				console.log(batchEnterTheParkData.value)
				vant.showConfirmDialog({
					title: '确定入园?',
					message: '请检查入园人员信息后确定入园',
					confirmButtonText: '入园',
					confirmButtonColor: "#ee0a24",
				}).then(() => {
					let info_ = batchEnterTheParkData.value
					if (info_ == null || info_ == "" || info_ == undefined||info_.length<1||!Array.isArray(info_)) {
						vant.showDialog({
							title: '错误',
							message: "请选择未入园人员！",
							confirmButtonColor: "#ee0a24",
						});
						return;
					}
					let data = "ObjectUser=" + JSON.stringify(info_);
					axios.post('/mobile/plugin/NSD/SE01DingDingApplication/request/EnterTheParkDataList.jsp', data,
							{
								header: {
									'Content-Type': 'application/json'
								}
							}).then(function (response) {
						let code = response.data.code;
						let message = response.data.message;
						if (code == 'S') {
							vant.showSuccessToast('入园成功');
							getData();
						} else {
							vant.showDialog({
								title: '提示',
								message: message,
							})
						}

					}).catch(function (error) {
						vant.showDialog({
							title: '提示',
							message: '入园异常，请联系管理员。',
						}).then(() => {
							// on close
						});
					})

				}).catch(() => {
					// on cancel
				});

			};
			//下拉刷新
			function onRefresh() {
				getData();
				isLoading.value=false;
			}
			return {
				option,
				dropDownValue,
				searchValue,
				dataList,
				showData,
				theme,
				themeVars,
				navbarHeight,
				table_navbarHeight,
				search_navbarHeight,
				timeOutEvent,
				longClick,
				oldMousePos,
				oldNodePos,
				btnType,
				isShow,
				configBtn,
				batchEnterTheParkData,
				isLoading,
				refreshDisabled,
				getData,
				themeSwitch,
				searchFiltr,
				onSearch,
				searchData,
				showToast,
				tableThClassName,
				tableRowClassName,
				goToLink,
				batchEnterTheParkDatafilter,
				batchEnterTheParkClick,
				getElementToPageTop,
				handleScroll,
				touchstart,
				touchMove,
				touchEnd,
				onRefresh
			};
		}
	}
	/**
	 * 人员详情信息页
	 * @type {{template: string, setup(): *}}
	 */
	let VisitorInformation = {
		template: '#VisitorInformation',
		setup() {
			let navbarHeight = Vue.ref('0');
			let show = Vue.ref(false);
			let showPicture = Vue.ref('');
			let dialogTitle = Vue.ref('');
			let info_mation = Vue.ref(VueRouter.useRoute().params.info);
			let info = Vue.ref(JSON.parse(info_mation.value));
			let touxian_Picture_id = Vue.ref(info.value.visitorspicture);
			let wuping_Picture_id = Vue.ref(info.value.thingspicture);
			let tx_picture = Vue.ref([]);
			let wp_picture = Vue.ref([]);
			let store = Vuex.useStore();
			let theme = Vue.computed({
				get: () => {
					return store.getters.getTheme;
				}
			});
			let isExistTouxian = Vue.computed({
				get: () => {
					let info = touxian_Picture_id.value
					if (info == null || info == "" || info == undefined) {
						return false;
					} else {
						return true;
					}
				}
			});
			let isExistWupin = Vue.computed({
				get: () => {
					let info = wuping_Picture_id.value
					if (info == null || info == "" || info == undefined) {
						return false;
					} else {
						return true;
					}
				}
			});
			let isWupingShow = Vue.computed({
				get: () => {
					if (wp_picture.value.length > 0) {
						return true;
					} else {
						return false;
					}
				}
			});
			//页面处理后信息
			let computed_info = Vue.computed({
				get: () => {
					let data=info.value;
					if (data.gender=="0") {
						data.gender="男"
					} else if(data.gender=="1") {
						data.gender="女"
					};

					if (data.documenttype=="0") {
						data.documenttype="身份证"
					} else if(data.documenttype=="1") {
						data.documenttype="护照"
					} else if(data.documenttype=="2") {
						data.documenttype="驾驶证"
					} else if(data.documenttype=="3") {
						data.documenttype="其他"
					};

					if (data.place=="0") {
						data.place="南屏园区"
					} else if(data.place=="1") {
						data.place="平沙园区"
					};

					return data;
				}
			});
			//头像显示
			let isTouxiangShow = Vue.computed({
				get: () => {
					if (tx_picture.value.length > 0) {
						return true;
					} else {
						return false;
					}
				}
			});

			//加载获取头像 和 物品图片信息
			Vue.onMounted(() => {
				getTxPicture();
				getWpPicture()
			})

			//获取头像
			async function getTxPicture() {
				if (touxian_Picture_id.value == null || touxian_Picture_id.value == undefined || touxian_Picture_id.value == "") {
					return;
				}
				axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/getPictureData.jsp', {
					params: {
						pictures: touxian_Picture_id.value,
					}
				}).then(function (response) {
					let code = response.data.code;
					let message = response.data.message;
					if (code == 'S') {
						tx_picture.value = response.data.data;
					} else {
						//vant.showFailToast(message);
					}
				}).catch(function (error) {
					vant.showFailToast('数据加载异');
				});
			}

			/**
			 * 获取物品图片
			 * */
			async function getWpPicture() {
				if (wuping_Picture_id.value == null || wuping_Picture_id.value == undefined || wuping_Picture_id.value == "") {
					wp_picture.value=[]
					return;
				}
				axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/getPictureData.jsp', {
					params: {
						pictures: wuping_Picture_id.value
					}
				}).then(function (response) {
					let code = response.data.code;
					let message = response.data.message;
					if (code == 'S') {
						wp_picture.value = response.data.data;
					} else {
						vant.showFailToast(message);
					}
				})
						.catch(function (error) {
							vant.showFailToast('数据加载异');
						});
			}

			let onClickLeft = () => history.back();

			//显示物品图片
			function showPotoGO() {
				vant.showImagePreview({
					images: wp_picture.value,
					closeable: true,
				});
			};
			//显示头像
			function showPotoTX() {
				vant.showImagePreview({
					images: tx_picture.value,
					closeable: true,
				});
			}
			//入园
			function EnterTheParkDataList() {
				vant.showConfirmDialog({
					title: '确定入园?',
					message: '请检查入园人员是否正确！',
					confirmButtonText: '入园',
					confirmButtonColor: "#ee0a24",
				}).then(() => {
					let info_ = info.value
					if (info_ == null || info_ == "" || info_ == undefined) {
						vant.showDialog({
							title: '提示',
							message: "数据异常，无法入园！",
						});
						return;
					}

					if (info_.visitstatus=="1") {
						vant.showDialog({
							title: '提示',
							message: "人员已入园，无需重复操作",
						});
						return;
					}

					var park_data = new Array();
					park_data.push(info.value);
					let data = "ObjectUser=" + JSON.stringify(park_data);
					axios.post('/mobile/plugin/NSD/SE01DingDingApplication/request/EnterTheParkDataList.jsp', data,
							{
								header: {
									'Content-Type': 'application/json'
								}
							}).then(function (response) {
						let code = response.data.code;
						let message = response.data.message;
						if (code == 'S') {
							vant.showSuccessToast('入园成功');
							setTimeout(function () {
								history.back()
							}, 1500)
						} else {
							vant.showDialog({
								title: '提示',
								message: message,
							})
						}

					}).catch(function (error) {
						vant.showDialog({
							title: '提示',
							message: '入园异常，请联系管理员。',
						}).then(() => {
							// on close
						});
					})

				}).catch(() => {
					// on cancel
				});

			};

			return {
				navbarHeight,
				show,
				tx_picture,
				wp_picture,
				showPicture,
				dialogTitle,
				theme,
				info,
				computed_info,
				isExistTouxian,
				isExistWupin,
				info_mation,
				isWupingShow,
				isTouxiangShow,
				onClickLeft,
				showPotoGO,
				showPotoTX,
				EnterTheParkDataList

			};
		},
	}

	/**
	 * 主题模式 暗黑dark  白色light
	 * @type {{mutations: {setTheme(*, *): void}, state: {theme: string}, getters: {getTheme: (function(*): *)}, actions: {setTheme(*): void}}}
	 */
	const myStore = {
		state: {
			theme: "light",
		},
		getters: {
			getTheme: (state) => {
				return state.theme
			}
		},
		mutations: {
			setTheme(state, theme) {
				state.theme = theme;
			}
		},
		actions: {
			setTheme(context) {
				console.log("===setTheme===")
				setTimeout(() => {
					//context:上下文，可以看成是store(默认参数)
					//contex.dispatch可以用于触发其他action
					if (context.state.theme == "light") {
						context.commit("setTheme", "dark");
					} else {
						context.commit("setTheme", "light");
					}
				}, 1000);
			}
		}
	}
	// 建立vuex的实例，vue3需要挂载实例
	const myVuex = Vuex.createStore(myStore)

	// 2. 定义一些路由
	// 每个路由都需要映射到一个组件。
	let routes = [
		{path: '/', component: Home, name: 'Home'},
		{path: '/VisitorInformation', component: VisitorInformation, name: 'VisitorInformation'},
	]

	// 3. 创建路由实例并传递 `routes` 配置
	let router = VueRouter.createRouter({
		// 4.  history 模式的。
		history: VueRouter.createWebHashHistory(),
		routes, // `routes: routes` 的缩写
	})

	// 5. 创建并挂载根实例
	let app = Vue.createApp({})
			.use(myVuex) // 挂载vuex
			.use(vant)
			.use(vant.Col)
			.use(vant.Row)
			.use(vant.Search)
			.use(vant.Cell)
			.use(vant.CellGroup)
			.use(vant.Lazyload)
			.use(vant.Field)
			.use(vant.DropdownMenu)
			.use(vant.DropdownItem)
			.use(vant.Form)
			.use(vant.ConfigProvider)
			.use(vant.Dialog)
			.use(vant.Sticky)
			.use(vant.Checkbox)
			.use(vant.CheckboxGroup)
			.use(vant.Space)
			.use(vant.Swipe)
			.use(vant.SwipeItem)
			.use(vant.Lazyload)
			.use(vant.PullRefresh)
			.use(router)
			.mount('#app');
</script>

</body>
</html>